<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #fenye {
            display: flex;
            align-items: center;
            gap: 10px;

            & button {
                height: 30px;
                background-color: #fff;
                border: 1px solid #999;
                cursor: pointer;
                &:hover {
                    background-color: red;
                }
            }

            & ul {
                display: flex;
                align-items: center;
                gap: 10px;
                margin: 0;
                padding: 0;

                & li {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 30px;
                    height: 30px;
                    border: 1px solid #999;
                    cursor: pointer;
                    &:hover {
                        background-color: red;
                    }
                }
            }
        }
    </style>
</head>

<body>

    <div id="fenye">
        <button id="prev">上一页</button>
        <ul id="pageRef">
        </ul>
        <button id="next">下一页</button>
    </div>

    <script>
        // const total = 100
        const total = 300
        const limit = 20
        // let page = 2
        let page = 1
        const createPaging = (opts) => {
            const total = opts.total
            const limit = opts.limit
            const page = opts.page
            const indent = 2
            const pageCount = 5
            const halfPageCount = Math.floor(pageCount / 2)
            const totalPage = Math.ceil(total / limit)
            

            console.log(JSON.stringify({
                total,
                limit,
                page,
                indent,
                pageCount,
                halfPageCount,
                totalPage
            }))

            // 5 + 2 = 7个按钮
            // 1 2 3 4 5 ... 15  

            const rc = []
            const unshift = (value, action = '') => {
                rc.unshift({ value, action })
            }
            const push = (value, action = '') => {
                rc.push({ value, action })
            }
            if (totalPage <= pageCount) {
                for (let index = 0; index < totalPage; index++) {
                    push(index + 1)
                }
                return rc
            }
            // ------------
            const steps = pageCount - indent
            const halfSteps = Math.floor(steps / 2)
            console.log('halfSteps', halfSteps)
            console.log('page - halfSteps', page - halfSteps)
            let before = page - halfSteps
            if(before > 1) {
                unshift('...')
                before--
                while(before) {
                    unshift(before--)
                }
    
            } else {
                while(before) {
                    unshift(before--)
                }
            }
       
            push(page)
            let after = page + halfSteps
            if(after <= totalPage) {
                console.log('totalPage - after', totalPage - after )
                if(totalPage - after > 1) {
                    for (let i = page; i < after; i++) {
                        push(i + 1)
                    }
                    push('...')
                    push(totalPage)
                } else {
                    for (let i = page; i < after; i++) {
                        push(i + 1)
                    }
                }
            }
            // if (page <= indent) {
            //     for (let index = 0; index < page; index++) {
            //         push(index + 1)
            //     }
            // } else {
            //     const diff = page - indent
            //     console.log(diff)
            //     // push(page)
            //     // push(page - 1)
            //     // push(1)
            //     for (let index = page; index > diff; index--) {
            //         unshift(index)
            //     }
            // }

            return rc
        }

        const rc = createPaging({
            total,
            limit,
            page,
        })

        pageRef.innerHTML = rc.map(({ value, action }) => {
            return `<li data-value="${value}" data-action="${action}">${value}</li>`
        }).join('')

        prev.addEventListener('click', () => {
            console.log(111)
        })
        next.addEventListener('click', () => {
            console.log(111)
        })
        pageRef.addEventListener('click', (e) => {
            const el = e.target
            if(el.nodeName === 'LI') {
                console.log('value', el.dataset.value)
                console.log('action', el.dataset.action)
            }
        })
    </script>

</body>

</html>